<template>
  <!--微信小程序-->
  <div class="main-container">
    <el-card class="card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-page-title">{{ pageName }}</span>
      </div>

      <el-tabs v-model="activeName" class="mt-[20px]" @tab-change="handleClick">
        <el-tab-pane :label="t('weappAccessFlow')" name="/channel/weapp" />
        <el-tab-pane :label="t('subscribeMessage')" name="/channel/weapp/message" />
        <el-tab-pane :label="t('weappRelease')" name="/channel/weapp/code" />
      </el-tabs>

      <div class="p-[20px]">
        <h3 class="panel-title !text-sm">{{ t('weappInlet') }}</h3>

        <el-row>
          <el-col :span="20">
            <el-steps class="!mt-[10px]" :active="4" direction="vertical">
              <el-step>
                <template #title>
                  <p class="text-[14px] font-[700] m-0">
                    {{ t('weappAttestation') }}
                  </p>
                </template>
                <template #description>
                  <span class="text-[#999]">{{ t('weappAttest') }}</span>
                  <div class="mt-[20px] mb-[40px] h-[32px]">
                    <el-button type="primary" @click="linkEvent('https://mp.weixin.qq.com/')">{{
                      t('clickAccess')
                    }}</el-button>
                  </div>
                </template>
              </el-step>

              <el-step>
                <template #title>
                  <p class="text-[14px] font-[700] m-0">
                    {{ t('weappSetting') }}
                  </p>
                </template>
                <template #description>
                  <span class="text-[#999]">{{ t('emplace') }}</span>
                  <div class="mt-[20px] mb-[40px] h-[32px]">
                    <template v-if="oplatformConfig.app_id && oplatformConfig.app_secret">
                      <el-button type="primary" @click="router.push('/channel/weapp/config')">{{
                        weappConfig.app_id ? t('seeConfig') : t('weappSettingBtn')
                      }}</el-button>
                      <el-button type="primary" plain @click="authBindWeapp">{{
                        weappConfig.is_authorization ? t('refreshAuth') : t('authWeapp')
                      }}</el-button>
                    </template>
                    <template v-else>
                      <el-button type="primary" @click="router.push('/channel/weapp/config')">{{
                        t('weappSettingBtn')
                      }}</el-button>
                      <el-button type="primary" plain @click="router.push('/channel/weapp/course')"
                        >配置教程</el-button
                      >
                    </template>
                  </div>
                </template>
              </el-step>

              <el-step>
                <template #title>
                  <p class="text-[14px] font-[700] m-0">
                    {{ t('uploadVersion') }}
                  </p>
                </template>
                <template #description>
                  <span class="text-[#999]">{{ t('releaseCourse') }}</span>
                  <div class="mt-[20px] mb-[40px] h-[32px]">
                    <el-button type="primary" plain @click="router.push('/channel/weapp/code')">{{
                      t('weappRelease')
                    }}</el-button>
                  </div>
                </template>
              </el-step>

              <el-step>
                <template #title>
                  <p class="text-[14px] font-[700] m-0">
                    {{ t('completeAccess') }}
                  </p>
                </template>
                <template #description>
                  <span class="text-[#999]">{{ t('releaseCourse') }}</span>
                  <div class="mt-[20px] mb-[40px] h-[32px]"></div>
                </template>
              </el-step>
            </el-steps>
          </el-col>

          <el-col :span="4">
            <div class="flex justify-center">
              <el-image class="w-[180px] h-[180px]" :src="qrCode ? img(qrCode) : ''">
                <template #error>
                  <div class="w-[100%] h-[100%] flex items-center justify-center bg-[#f5f7fa]">
                    <span>{{ qrCode ? t('fileErr') : t('emptyQrCode') }}</span>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="mt-[22px] text-center">
              <p class="text-[12px]">{{ t('clickAccess2') }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { t } from '@/lang'
import { img } from '@/utils/common'
import { getWeappConfig } from '@/views/app/api/weapp'
import { getAuthorizationUrl } from '@/views/app/api/wxoplatform'
import { getWxoplatform } from '@/views/app/api/sys'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const pageName = route.meta.title

const activeName = ref('/channel/weapp')
const active = ref(2)
const qrCode = ref('')
const weappConfig = ref({})
const oplatformConfig = ref({})

const onShowGetWeappConfig = async () => {
  await getWeappConfig().then(({ data }) => {
    weappConfig.value = data
    qrCode.value = data.qr_code
  })
}

onMounted(async () => {
  onShowGetWeappConfig()

  await getWxoplatform().then(({ data }) => {
    oplatformConfig.value = data
  })

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      onShowGetWeappConfig()
    }
  })
})

onUnmounted(() => {
  document.removeEventListener('visibilitychange', () => {})
})

const linkEvent = (url: string) => {
  window.open(url, '_blank')
}
const handleClick = (val: any) => {
  router.push({ path: activeName.value })
}
const authBindWeapp = () => {
  getAuthorizationUrl().then(({ data }) => {
    window.open(data)
  })
}
</script>

<style lang="scss" scoped></style>
